<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加产品</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f2f2f2;
        }

        h1 {
            margin-bottom: 20px;
            text-align: center;
            color: #333;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }

        .form-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .form-group {
            flex-basis: 48%;
        }

        input[type="text"],
        select {
            width: 100%;
            padding: 8px;
            border: none;
            border-radius: 4px;
            box-sizing: border-box;
            background-color: #fff;
            color: #333;
            font-size: 16px;
            margin-top: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        select {
            background-color: #f2f2f2;
        }

        #submitButton {
            margin-top: 20px;
            padding: 12px 24px;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 18px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: background-color 0.2s ease-out;
        }

        #submitButton:hover {
            background-color: #2980b9;
        }

        .image-preview {
            position: relative;
            display: inline-block;
            width: 150px;
            height: 150px;
            cursor: pointer;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        .image-preview img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

        #preview {
        max-width: 100%;
        max-height: 100%;
        object-fit: fill;
        }

        .flash-message.error {
          color: white;
          background-color: red;
          padding: 10px;
          margin-bottom: 10px;
        }

        .flash-message.success {
          color: white;
          background-color: green;
          padding: 10px;
          margin-bottom: 10px;
        }

        @media only screen and (max-width: 600px) {
            body {
                padding: 10px;
            }

            .form-group {
                flex-basis: 100%;
            }

            input[type="text"],
            select {
                font-size: 14px;
            }

            #submitButton {
                padding: 10px 20px;
                font-size: 16px;
            }

            .image-preview {
                width: 100px;
                height: 100px;
            }

            .flash-message {
                padding: 8px;
            }
        }
    </style>
</head>
<body>
<h1>添加产品</h1>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% if category == 'error' %}
<div class="flash-message error">{{ message }}</div>
{% else %}
<div class="flash-message success">{{ message }}</div>
{% endif %}
{% endfor %}
{% endif %}
{% endwith %}
<form id="productForm" action="/submit_prod" method="POST" enctype="multipart/form-data">
    <div class="form-row">
        <div class="form-group">
            <label for="productImage">产品图片：</label>
            <!--            <div id="imagePreview" class="image-preview" onclick="uploadImage()">-->
            <!--                &lt;!&ndash; 使用 Flask 的 url_for 函数生成静态文件路径 &ndash;&gt;-->
            <!--                <img id="preview" src="{{ url_for('static', filename='img/Default_image.png') }}" alt="预览区域"-->
            <!--                     style="display: block;">-->
            <!--            </div>-->
            <div id="imagePreview" class="image-preview" onclick="uploadImage()">
                {% if product_image %}
                <img id="preview" src="{{ url_for('static', filename=product_image) }}" alt="预览区域"
                     style="display: block;">
                {% else %}
                <img id="preview" src="{{ url_for('static', filename='img/Default_image.png') }}" alt="预览区域"
                     style="display: block;">
                {% endif %}
            </div>
            <input type="file" id="productImage" name="productImage" accept="image/*" onchange="previewImage(this)"
                   src="{{ url_for('static', filename='img/Default_image.png') }}"
                   style="display: none;">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label for="customer_id">所属公司：</label>
            <select id="customer_id" name="customer_id">
                <option value="">请选择公司！</option>
                {% for customer in customer_list %}
                <option value="{{ customer[0] }}">{{ customer[1] }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label for="class_id">产品类别：</label>
            <select id="class_id" name="class_id">
                {% for class_list in class_list %}
                <option value="{{ class_list [0] }}">{{ class_list [1] }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label for="productName">产品名称：</label>
            <input type="text" id="productName" name="productName" placeholder="请输入产品名称">
        </div>
        <div class="form-group">
            <label for="productModel">规格型号：</label>
            <input type="text" id="productModel" name="productModel" placeholder="请输入产品型号">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label for="productColor">产品颜色：</label>
            <input type="text" id="productColor" name="productColor" placeholder="请输入产品颜色">
        </div>
        <div class="form-group">
            <label for="productUnit">计量单位：</label>
            <input type="text" id="productUnit" name="productUnit" placeholder="请输入产品计量单位">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label for="purchasePrice">采购价格：</label>
            <input type="text" id="purchasePrice" name="purchasePrice" placeholder="请输入产品采购价格">
        </div>
        <div class="form-group">
            <label for="salesPrice">销售价格：</label>
            <input type="text" id="salesPrice" name="salesPrice" placeholder="请输入产品销售价格">
        </div>
    </div>
    <button type="submit" id="submitButton">提交</button>
</form>

<script>
    function previewImage(fileInput) {
        var preview = document.getElementById('preview');
        var file = fileInput.files[0];

        if (file) {
            // 创建FileReader对象用于读取文件
            var reader = new FileReader();

            // 当文件被读取时触发，设置图片的src为读取的结果，显示图片
            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            }

            // 以DataURL的形式读取文件
            reader.readAsDataURL(file);
        }
    }

    function uploadImage() {
        // 模拟点击input file，打开文件选择窗口
        document.getElementById('productImage').click();
    }
</script>
</body>
</html>
